<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/iframe/iframe.js" charset="utf-8"></script>

<div id="iframeDemo">
    <div title='API' tabid='tab1'>
       <div>
				<h2>&lt;iframe id="" src="" class="" frameborder="0" scrolling="auto" style=""&gt; &lt;/iframe&gt; </h2>
				
				<h3>作用：iframe 元素会创建包含另外一个文档的内联框架（即行内框架）</h3>
				
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
									
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="id"></samp>							    
								<span class="ccay-form-input">
									{String类型}<p>规定元素的唯一id</span></li>
							
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="src"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>规定在 iframe 中显示的文档的URL</span></li>
									
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="class"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>规定元素的类名(classname)</span></li>

							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="frameborder"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>规定是否显示框架周围的边框：0、1两种，默认为0
									<p>0：不显示框架周围的边框
									<p>1：显示框架周围的边框</span></li>
							
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="scrolling"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>规定是否在 iframe 中显示滚动条："yes"、"no"、"auto"三种，默认为yes
									<p>yes：显示滚动条
									<p>no：不显示滚动条
									<p>auto：自动显示滚动条</span></li>

					       <li class="ccay-form-row">
					            <samp class="i18n" i18nKey="style"></samp>
								<span class="ccay-form-input">
					             {String类型}<p>规定元素的行内样式(inline style)</span></li>
				    </ul>
			   </div>
		    </form>
			</div>	
    </div>	
	 <div title='Demo' tabid='tab2'>
		<div>
			<h4><span>实例：iframe</span></h4>
			<div class='demo'>
			    <iframe src="http://www.baidu.com" scrolling="auto" style="border: 1px #929191 solid;"> </iframe>
			</div>
			<div>
				<span>生成iframe</span>
			</div>
			<div class="codeArea">
				<pre id='preIframe'>&lt;iframe src="http://www.baidu.com" scrolling="auto" style="border: 1px #929191 solid;"&gt; &lt;/iframe&gt;</pre>
			</div>
			<div>
				<a onclick="Ccay.example.openTry('#iframeDemo','',$('#preIframe').text())">亲自试一试</a>
			</div>
		</div> 
	</div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div tabid="tab4" title="FAQ">
	  <form class="init ccay-form">
	    <div class="ccay-form-body">
	    <ul>
	    </ul>
	</div>     
	<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	            <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	                          <samp class="i18n" i18nKey=""></samp>                          
	                         <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
	</div>
	  </form>                    
	</div>  
</div>	 
